<template>
  <div class="div">
    <!-- 首页card -->
    <van-card v-for="(item,index) in cards0" :key="item.id" :thumb="_localhost+ item.img"
    >
      <template #tags class="tags">
        <van-tag class="tag1"> {{ item.goodsname }}</van-tag> <br />
        <van-tag class="tag2">
          现价格：<span>￥{{ item.price }}</span>
        </van-tag>
        <van-tag class="tag3">
          <del>
            原价格：<span>￥{{ item.market_price }}</span></del
          > </van-tag
        ><br />
        <van-tag class="tag4" @click="btn(index)"> 立即抢购 </van-tag>
      </template>
    </van-card>
   
  </div>
</template>

<script>
export default {
 
  props: ["cards0"],
  methods:{
    btn(index){
      this.$router.push(`/detail?id=${this.cards0[index].id}`)
    }
  }

};
</script>

<style scoped>
.van-card {
  width: 80vw;
  height: 1.5rem;
  margin: 0.1rem auto;
  box-shadow: 0.07rem 0.07rem 0.05rem #0006;
  border: 2px solid #6666;
  padding: 0.2rem;
  box-sizing: border-box;
}

.tags {
  font-size: 0.2rem;
}
.tag1 {
  margin-top: 0.05rem;
  background-color: #fff;
  color: black;
  font-weight: 600;
}

.tag2 {
  margin-top: 0.1rem;
  border: none;
  outline: none;
  background-color: #fff;
  color: red;
  font-size: 0.15rem;
  font-weight: 600;
}
.tag3 {
  margin-top: 0.1rem;
  border: none;
  outline: none;
  background-color: #fff;
  color: #ccc;
  font-size: 0.15rem;
  font-weight: 600;
}
.tag4 {
  margin-top: 0.05rem;
  width: 1rem;
  height: 0.3rem;
  background-color: orange;
  color: #eee;
  font-weight: 600;
  font-size: 0.15rem;
  line-height: 0.3rem;
  border-radius: 0.1rem;
  padding-left: 0.25rem;
  box-sizing: border-box;
}
</style>